import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem'
import axios from 'axios'
import { CSSTransition } from 'react-transition-group'
import './style.css'
// Fragment 相当于小程序中的占位符 不会被渲染
// 引入react 主要的原因是 使用 jsx 语法
class TodoList extends Component {

  // 相当于Python 中的 __new__ 魔法属性
  constructor(props) {
    super(props);
    // 相当于 vue中 组件的 data
    this.state = {
      inputValue: 'hhh',
      list: ['123', '222'],
      show: true
    }
    // 性能优化
    this.handlerValueChange = this.handlerValueChange.bind(this)
    this.handlerBtnClick = this.handlerBtnClick.bind(this)
    this.handlerDelete = this.handlerDelete.bind(this)
    this.handlerToggle = this.handlerToggle.bind(this)
    console.log('创建组件')
  }
  //挂载前执行
  componentWillMount() {
    console.log('数据挂载前执行')
  }
  render() {
    console.log('数据渲染')
    return (
      <Fragment>
        <div>
          {/* 更改this 指向的 问题 */}
          <input className='input' value={this.state.inputValue} onChange={this.handlerValueChange} />
          <button onClick={this.handlerBtnClick}>提交</button>
          <ul ref={(ul) => { this.ul = ul }}>
            {
              this.getTodoItem()
            }
          </ul>

        </div>
        {/* 使用动画 */}
        <CSSTransition
          in={this.props.show}
          timeout={1000}
          className='fade'
          unmountOnExit
          onExited={(el) => { el.style.color = 'blue' }}
        >
          <div>hello</div>
        </CSSTransition>
        <button onClick={this.handlerToggle}>Toggle</button>
      </Fragment>
    )
  }
  // 挂载完毕后
  componentDidMount() {
    console.log('数据挂载完毕,此处发送ajax请求获取初始数据比较好')
    // axios.get('/api/todolist').then(() => {
    //   alert('succ')
    // }).catch(() => {
    //   alert('err')
    // })
  }
  // 数据更新 返回是不是可以更新数据的结果
  shouldComponentUpdate() {
    console.log('数据更新前，返回布尔值')
    return true
  }
  componentDidUpdate() {
    console.log('数据更新完毕')
  }
  getTodoItem() {
    return this.state.list.map((item, index) => {
      return (
        <div key={index}>
          {/* 父组件 通过属性向子组件传值 传递方法  */}
          <TodoItem content={item} index={index} deleteItem={this.handlerDelete} />
        </div>
      )
      // return <li key={index}
      //   onClick={this.handlerDelete.bind(this, index)}
      //   dangerouslySetInnerHTML={{ __html: item }}
      // ></li>
    })
  }
  handlerValueChange(e) {
    // react 中的更改 state 的函数 和小程序的是一样
    // this.setState({
    //   inputValue: e.target.value
    // })
    // #todo:优化 1
    const value = e.target.value
    this.setState(() => ({
      inputValue: value
    }))
  }
  handlerBtnClick() {
    // let list = [...this.stgetTodoItemate.list, this.state.inputValue]
    // this.setState({
    //   list: list,
    //   inputValue: ''
    // })
    this.setState((prevState) => ({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }), () => {
      // 异步函数执行完调用这个
      console.log(this.ul.querySelectorAll('div').length)

    })
    console.log(this.ul)
    // 因为setState 是异步执行函数 会出现执行结果的问题
    // console.log(this.ul.querySelectorAll('div').length)
  }
  handlerDelete(index) {
    // let list = [...this.state.list]
    // list.splice(index, 1)
    // this.setState({
    //   list: list
    // })
    this.setState((prevState) => {
      const list = [...prevState.list]
      list.splice(index, 1)
      return { list }
    })
  }
  handlerToggle() {
    this.setState(() => ({
      show: this.props.show ? true : false
    }))
  }
}

export default TodoList;
